<title>按钮</title>

<div class="content-header row">
	 <div class="content-header-left col-md-8 col-12 mb-2 breadcrumb-new">
	 	<h3 class="content-header-title mb-0 d-inline-block">按钮</h3>
	 	<div class="row breadcrumbs-top d-inline-block">
	 		<div class="breadcrumb-wrapper mr-1">
	 			<ol class="breadcrumb">
	 				<li class="breadcrumb-item"><a href="/dashboard" class="menu-router">首页</a></li>
	 				<li class="breadcrumb-item"><a href="javascript:;">组件</a></li>
	 				<li class="breadcrumb-item active">按钮</li>
	 			</ol>
	 		</div>
	 	</div>
	 </div>
</div>

<div class="content-body">
<!-- Basic Buttons start -->
<section id="basic-buttons">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Basic Buttons </h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
                        <div class="form-group">
                            <!-- basic buttons -->
                            <button type="button" class="btn btn-secondary btn-min-width mr-1 mb-1">Secondary</button>
                            <button type="button" class="btn btn-primary btn-min-width mr-1 mb-1">Primary</button>
                            <button type="button" class="btn btn-success btn-min-width mr-1 mb-1">Success</button>
                            <button type="button" class="btn btn-info btn-min-width mr-1 mb-1">Info</button>
                            <button type="button" class="btn btn-warning btn-min-width mr-1 mb-1">Warning</button>
                            <button type="button" class="btn btn-danger btn-min-width mr-1 mb-1">Danger</button>
                            <button type="button" class="btn btn-light btn-min-width mr-1 mb-1">Light</button>
                            <button type="button" class="btn btn-dark btn-min-width mr-1 mb-1">Dark</button>
                            <button class="btn btn-default btn-min-width mr-1 mb-1 block-submit">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Buttons </h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Use a class <code>.btn-outline-*</code> to quickly create a outline button.</p>
                        <div class="form-group">
                            <!-- Outline buttons -->
                            <button type="button" class="btn btn-outline-secondary btn-min-width mr-1 mb-1">Secondary</button>
                            <button type="button" class="btn btn-outline-primary btn-min-width mr-1 mb-1">Primary</button>
                            <button type="button" class="btn btn-outline-success btn-min-width mr-1 mb-1">Success</button>
                            <button type="button" class="btn btn-outline-info btn-min-width mr-1 mb-1">Info</button>
                            <button type="button" class="btn btn-outline-warning btn-min-width mr-1 mb-1">Warning</button>
                            <button type="button" class="btn btn-outline-danger btn-min-width mr-1 mb-1">Danger</button>
                            <button type="button" class="btn btn-outline-light btn-min-width mr-1 mb-1">Light</button>
                            <button type="button" class="btn btn-outline-dark btn-min-width mr-1 mb-1">Dark</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Basic Buttons end -->

<!-- Gradient Buttons start -->
<section id="gradient-buttons">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Gradient Buttons </h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">This admin template includes 6 predefined gradient colors to use it in buttons. <code>.btn-bg-gradient-x-purple-blue, .btn-gradient-x-purple-red, .btn-gradient-x-blue-green, .btn-gradient-x-orange-yellow, .btn-gradient-x-blue-cyan, .btn-gradient-x-red-pink</code>. YOu can also use round button class <code>.round</code>, and buttons with icons with this.</p>

                        <div class="form-group">                            
                            <button type="button" class="btn btn-bg-gradient-x-purple-blue col-12 col-md-5 mr-1 mb-1">Purple blue</button>                            
                            <button type="button" class="btn btn-bg-gradient-x-purple-red col-12 col-md-5 mr-1 mb-1">Purple red</button>
                            <button type="button" class="btn btn-bg-gradient-x-blue-green col-12 col-md-5 mr-1 mb-1">Blue green</button>
                            <button type="button" class="btn btn-bg-gradient-x-orange-yellow col-12 col-md-5 mr-1 mb-1">Orange yellow</button>
                            <button type="button" class="btn btn-bg-gradient-x-blue-cyan col-12 col-md-5 mr-1 mb-1">Blue cyan</button>
                            <button type="button" class="btn btn-bg-gradient-x-red-pink col-12 col-md-5 mr-1 mb-1">Red pink</button>                       
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Gradient Buttons with Glow</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">You ca also add glow effects to gradient buttons. For that you just required to use <code>.btn-glow</code> class with any one of this gradient colors <code>.btn-bg-gradient-x-purple-blue, .btn-gradient-x-purple-red, .btn-gradient-x-blue-green, .btn-gradient-x-orange-yellow, .btn-gradient-x-blue-cyan, .btn-gradient-x-red-pink</code></p>
                        <div class="form-group">
                            <button type="button" class="btn btn-glow btn-bg-gradient-x-purple-blue col-12 col-md-5 mr-1 mb-1">Purple blue</button>                            
                            <button type="button" class="btn btn-glow btn-bg-gradient-x-purple-red col-12 col-md-5 mr-1 mb-1">Purple red</button>
                            <button type="button" class="btn btn-glow btn-bg-gradient-x-blue-green col-12 col-md-5 mr-1 mb-1">Blue green</button>
                            <button type="button" class="btn btn-glow btn-bg-gradient-x-orange-yellow col-12 col-md-5 mr-1 mb-1">Orange yellow</button>
                            <button type="button" class="btn btn-glow btn-bg-gradient-x-blue-cyan col-12 col-md-5 mr-1 mb-1">Blue cyan</button>
                            <button type="button" class="btn btn-glow btn-bg-gradient-x-red-pink col-12 col-md-5 mr-1 mb-1">Red pink</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Gradient Buttons end -->

<!-- Round Buttons start -->
<section id="round-buttons">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Round Buttons</h5>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Use <code>.round</code> class for round buttons.</p>
                        <div class="form-group">
                            <!-- basic buttons -->
                            <button type="button" class="btn btn-secondary round btn-min-width mr-1 mb-1">Secondary</button>
                            <button type="button" class="btn btn-primary round btn-min-width mr-1 mb-1">Primary</button>
                            <button type="button" class="btn btn-success round btn-min-width mr-1 mb-1">Success</button>
                            <button type="button" class="btn btn-info round btn-min-width mr-1 mb-1">Info</button>
                            <button type="button" class="btn btn-warning round btn-min-width mr-1 mb-1">Warning</button>
                            <button type="button" class="btn btn-danger round btn-min-width mr-1 mb-1">Danger</button>
                            <button type="button" class="btn btn-light round btn-min-width mr-1 mb-1">Light</button>
                            <button type="button" class="btn btn-dark round btn-min-width mr-1 mb-1">Dark</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Round Outline Buttons</h5>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Use a class <code>.round</code> with outline button class to create round outline button.</p>
                        <div class="form-group">
                            <!-- Round buttons -->
                            <button type="button" class="btn btn-outline-secondary round btn-min-width mr-1 mb-1">Secondary</button>
                            <button type="button" class="btn btn-outline-primary round btn-min-width mr-1 mb-1">Primary</button>
                            <button type="button" class="btn btn-outline-success round btn-min-width mr-1 mb-1">Success</button>
                            <button type="button" class="btn btn-outline-info round btn-min-width mr-1 mb-1">Info</button>
                            <button type="button" class="btn btn-outline-warning round btn-min-width mr-1 mb-1">Warning</button>
                            <button type="button" class="btn btn-outline-danger round btn-min-width mr-1 mb-1">Danger</button>
                            <button type="button" class="btn btn-outline-light round btn-min-width mr-1 mb-1">Light</button>
                            <button type="button" class="btn btn-outline-dark round btn-min-width mr-1 mb-1">Dark</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Round Buttons end -->
<!-- Basic Button Icon start -->
<section id="basic-button-icons">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Buttons with Icon </h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
                        <div class="form-group">
                            <!-- Buttons with Icon -->
                            <button type="button" class="btn btn-secondary btn-min-width mr-1 mb-1"><i class="ft-music"></i> Secondary</button>
                            <button type="button" class="btn btn-primary btn-min-width mr-1 mb-1"><i class="ft-mic"></i> Primary</button>
                            <button type="button" class="btn btn-success btn-min-width mr-1 mb-1"><i class=""></i> Success</button>
                            <button type="button" class="btn btn-info btn-min-width mr-1 mb-1"><i class="ft-pause"></i> Info</button>
                            <button type="button" class="btn btn-warning btn-min-width mr-1 mb-1">Warning <i class="ft-bookmark"></i></button>
                            <button type="button" class="btn btn-danger btn-min-width mr-1 mb-1">Danger <i class="ft-command"></i></button>
                            <button type="button" class="btn btn-light btn-min-width mr-1 mb-1">Light <i class="ft-radio"></i></button>
                            <button type="button" class="btn btn-dark btn-min-width mr-1 mb-1">Dark <i class="ft-link-2"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Buttons with Icon </h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Bootstrap includes six predefined button styles, each serving its own semantic purpose.</p>
                        <div class="form-group">
                            <!-- Outline buttons with Icons -->
                            <button type="button" class="mr-1 mb-1 btn btn-outline-secondary btn-min-width"><i class="ft-music"></i> Secondary</button>
                            <button type="button" class="mr-1 mb-1 btn btn-outline-primary btn-min-width"><i class="ft-mic"></i> Primary</button>
                            <button type="button" class="mr-1 mb-1 btn btn-outline-success btn-min-width"><i class="ft-speaker"></i> Success</button>
                            <button type="button" class="mr-1 mb-1 btn btn-outline-info btn-min-width"><i class="ft-bookmark"></i> Info</button>
                            <button type="button" class="mr-1 mb-1 btn btn-outline-warning btn-min-width"><i class="ft-tag"></i> Warning</button>
                            <button type="button" class="mr-1 mb-1 btn btn-outline-danger btn-min-width"><i class="ft-umbrella"></i> Danger</button>
                            <button type="button" class="mr-1 mb-1 btn btn-outline-light btn-min-width"><i class="ft-radio"></i> Light</button>
                            <button type="button" class="mr-1 mb-1 btn btn-outline-dark btn-min-width"><i class="ft-link-2"></i> Dark</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Basic Button Icon end -->
<!-- Buttons Glow start -->
<section id="button-glow">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Buttons Glow</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Use <code>.btn-glow</code> class with any colored button to add button glow.</p>
                        <div class="form-group">
                            <!-- Buttons Glow -->
                            <button type="button" class="btn btn-primary btn-min-width btn-glow mr-1 mb-1">Primary</button>
                            <button type="button" class="btn btn-success btn-min-width btn-glow mr-1 mb-1">Success</button>
                            <button type="button" class="btn btn-info btn-min-width btn-glow mr-1 mb-1">Info</button>
                            <button type="button" class="btn btn-warning btn-min-width btn-glow mr-1 mb-1">Warning</button>
                            <button type="button" class="btn btn-danger btn-min-width btn-glow mr-1 mb-1">Danger</button>
                            <button type="button" class="btn btn-purple btn-min-width btn-glow mr-1 mb-1">Purple</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Buttons Glow</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">You can use <code>.btn-glow</code> class with outline button to add button glow.</p>
                        <div class="form-group">
                            <!-- Outline Buttons Glow -->
                            <button type="button" class="btn btn-outline-primary btn-min-width btn-glow mr-1 mb-1">Primary</button>
                            <button type="button" class="btn btn-outline-success btn-min-width btn-glow mr-1 mb-1">Success</button>
                            <button type="button" class="btn btn-outline-info btn-min-width btn-glow mr-1 mb-1">Info</button>
                            <button type="button" class="btn btn-outline-warning btn-min-width btn-glow mr-1 mb-1">Warning</button>
                            <button type="button" class="btn btn-outline-danger btn-min-width btn-glow mr-1 mb-1">Danger</button>
                            <button type="button" class="btn btn-outline-purple btn-min-width btn-glow mr-1 mb-1">Purple</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Buttons Glow end -->
<!-- Buttons Shadow start -->
<section id="button-shadow">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Buttons Shadow</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Use <code>.box-shadow-*</code> class with button to add button shadow.</p>
                        <div class="form-group">
                            <!-- Buttons Shadow -->
                            <button type="button" class="btn btn-primary btn-min-width box-shadow-1 mr-1 mb-1">Primary</button>
                            <button type="button" class="btn btn-success btn-min-width box-shadow-2 mr-1 mb-1">Success</button>
                            <button type="button" class="btn btn-info btn-min-width box-shadow-3 mr-1 mb-1">Info</button>
                            <button type="button" class="btn btn-warning btn-min-width box-shadow-4 mr-1 mb-1">Warning</button>
                            <button type="button" class="btn btn-danger btn-min-width box-shadow-5 mr-1 mb-1">Danger</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Buttons Shadow</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Use <code>.box-shadow-*</code> class with button to add button shadow.</p>
                        <div class="form-group">
                            <!-- Outline Buttons Shadow -->
                            <button type="button" class="btn btn-outline-primary btn-min-width box-shadow-1 mr-1 mb-1">Primary</button>
                            <button type="button" class="btn btn-outline-success btn-min-width box-shadow-2 mr-1 mb-1">Success</button>
                            <button type="button" class="btn btn-outline-info btn-min-width box-shadow-3 mr-1 mb-1">Info</button>
                            <button type="button" class="btn btn-outline-warning btn-min-width box-shadow-4 mr-1 mb-1">Warning</button>
                            <button type="button" class="btn btn-outline-danger btn-min-width box-shadow-5 mr-1 mb-1">Danger</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Buttons Shadow end -->
<!-- Single button dropdowns start -->
<section id="single-button-dropdowns">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Single button dropdowns</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Turn a button into a dropdown toggle with some basic markup changes.</p>
                        <div class="form-group">
                            <!-- Single Button Dropdown -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-secondary btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Secondary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-primary btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-success btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-info btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-warning btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-danger btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-light btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Light</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-dark btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dark</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline button dropdowns</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Turn a button into a dropdown toggle with some basic markup changes.</p>
                        <div class="form-group">
                            <!-- Single outline button dropdowns -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-secondary btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Secondary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-primary btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-success btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-info btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-warning btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-danger btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-light btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Light</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-dark btn-min-width dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dark</button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Single button dropdowns end -->
<!-- Split Buttons start -->
<section id="split-buttons">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Split Buttons</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Similarly, create split button dropdowns with the same markup changes, only with a separate button.</p>
                        <div class="form-group">
                            <!-- Split Button Dropdown -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-secondary">Secondary</button>
                                <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-primary">Primary</button>
                                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-success">Success</button>
                                <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-info">Info</button>
                                <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-warning">Warning</button>
                                <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-light">Light</button>
                                <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-dark">Dark</button>
                                <button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Split Outline Buttons</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Similarly, create split outline button dropdowns with the same markup changes, only with a separate button.</p>
                        <div class="form-group">
                            <!-- Split Outline button dropdowns -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-primary">Primary</button>
                                <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-success">Success</button>
                                <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-info">Info</button>
                                <button type="button" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-warning">Warning</button>
                                <button type="button" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-danger">Danger</button>
                                <button type="button" class="btn btn-outline-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-light">Light</button>
                                <button type="button" class="btn btn-outline-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                            <div class="btn-group mr-1 mb-1">
                                <button type="button" class="btn btn-outline-dark">Dark</button>
                                <button type="button" class="btn btn-outline-dark dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <span class="sr-only">Toggle Dropdown</span>
                                </button>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="#">Action</a>
                                    <a class="dropdown-item" href="#">Another action</a>
                                    <a class="dropdown-item" href="#">Something else here</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#">Separated link</a>
                                </div>
                            </div>
                            <!-- /btn-group -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Split Buttons end -->
<!-- Button group start -->
<section id="button-group">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Button group</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <p class="card-subtitle">Group a series of buttons together on a single line with the button group. Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
                            <!-- button group -->
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-secondary">Secondary</button>
                                <button type="button" class="btn btn-primary">Primary</button>
                                <button type="button" class="btn btn-light">Light</button>
                                <button type="button" class="btn btn-dark">Dark</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Button Group</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <p class="card-subtitle">Group a series of buttons together on a single line with the outline button group. Wrap a series of buttons with <code>.btn</code> & <code>.btn-outline-*</code> in <code>.btn-group</code>.</p>
                            <!-- Outline Button group -->
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-outline-secondary">Secondary</button>
                                <button type="button" class="btn btn-outline-primary">Primary</button>
                                <button type="button" class="btn btn-outline-light">Light</button>
                                <button type="button" class="btn btn-outline-dark">Dark</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Button group end -->
<!-- Icon Buttons start -->
<section id="icons-buttons">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Icon Buttons</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <!-- Simple Icon Button -->
                            <button type="button" class="btn btn-icon btn-secondary mr-1"><i class="ft-music"></i></button>
                            <button type="button" class="btn btn-icon btn-primary mr-1"><i class="ft-mic"></i></button>
                            <button type="button" class="btn btn-icon btn-success mr-1"><i class="ft-paperclip"></i></button>
                            <button type="button" class="btn btn-icon btn-info mr-1"><i class="ft-pause"></i></button>
                            <button type="button" class="btn btn-icon btn-warning mr-1"><i class="ft-bookmark"></i></button>
                            <button type="button" class="btn btn-icon btn-danger mr-1"><i class="ft-command"></i></button>
                            <button type="button" class="btn btn-icon btn-light mr-1"><i class="ft-radio"></i></button>
                            <button type="button" class="btn btn-icon btn-dark mr-1"><i class="ft-link-2"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Icon Buttons</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <!-- Outline Icon Buttons -->
                            <button type="button" class="btn btn-outline-secondary mr-1"><i class="ft-music"></i></button>
                            <button type="button" class="btn btn-outline-primary mr-1"><i class="ft-mic"></i></button>
                            <button type="button" class="btn btn-outline-success mr-1"><i class="ft-speaker"></i></button>
                            <button type="button" class="btn btn-outline-info mr-1"><i class="ft-book"></i></button>
                            <button type="button" class="btn btn-outline-warning mr-1"><i class="ft-bookmark"></i></button>
                            <button type="button" class="btn btn-outline-danger mr-1"><i class="ft-umbrella"></i></button>
                            <button type="button" class="btn btn-outline-light mr-1"><i class="ft-radio"></i></button>
                            <button type="button" class="btn btn-outline-dark mr-1"><i class="ft-link-2"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Icon Buttons end -->
<!-- Sizes start -->
<section id="sizes-2">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Sizes</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Add <code>.btn-lg</code> or <code>.btn-sm</code> for Fancy larger or smaller buttons size.</p>
                        <!-- simple sizes -->
                        <div class="form-group">
                            <button type="button" class="btn mr-1 mb-1 btn-success btn-lg">Large button</button>
                            <button type="button" class="btn mr-1 mb-1 btn-danger btn-lg">Large button</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn mr-1 mb-1 btn-success">Default button</button>
                            <button type="button" class="btn mr-1 mb-1 btn-danger">Default button</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn mr-1 mb-1 btn-success btn-sm">Small button</button>
                            <button type="button" class="btn mr-1 mb-1 btn-danger btn-sm">Small button</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn mr-1 mb-1 btn-success btn-xs">XSmall button</button>
                            <button type="button" class="btn mr-1 mb-1 btn-danger btn-xs">XSmall button</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Sizes</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="card-subtitle">Outline buttons with Icons in different sizes</p>
                        <!-- sizes with icons -->
                        <div class="form-group">
                            <button type="button" class="btn mr-1 mb-1 btn-outline-success btn-lg">Large button</button>
                            <button type="button" class="btn mr-1 mb-1 btn-outline-danger btn-lg">Large button</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn mr-1 mb-1 btn-outline-success">Default button</button>
                            <button type="button" class="btn mr-1 mb-1 btn-outline-danger">Default button</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn mr-1 mb-1 btn-outline-success btn-sm">Small button</button>
                            <button type="button" class="btn mr-1 mb-1 btn-outline-danger btn-sm">Small button</button>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn mr-1 mb-1 btn-outline-success btn-xs">XSmall button</button>
                            <button type="button" class="btn mr-1 mb-1 btn-outline-danger btn-xs">XSmall button</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Sizes end -->
<!-- Button Group Sizes start -->
<section id="button-group-sizes">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Button Group Sizes</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="subtitle">Instead of applying button sizing classes to every button in a group, just add <code>.btn-group-*</code> to each <code>.btn-group</code>.</p>
                        <div class="form-group">
                            <!-- Button Group Sizes -->
                            <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-info">Info</button>
                                <button type="button" class="btn btn-warning">Warning</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-info">Info</button>
                                <button type="button" class="btn btn-warning">Warning</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-info">Info</button>
                                <button type="button" class="btn btn-warning">Warning</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="btn-group btn-group-xs" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-danger">Danger</button>
                                <button type="button" class="btn btn-info">Info</button>
                                <button type="button" class="btn btn-warning">Warning</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Button Group Sizes</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="subtitle">Outline Button Group with Icons in different sizes</p>
                        <div class="form-group">
                            <!-- Button Group with Icons in different sizes -->
                            <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-outline-danger">Danger</button>
                                <button type="button" class="btn btn-outline-info">Info</button>
                                <button type="button" class="btn btn-outline-warning">Warning</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-outline-danger">Danger</button>
                                <button type="button" class="btn btn-outline-info">Info</button>
                                <button type="button" class="btn btn-outline-warning">Warning</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-outline-danger">Danger</button>
                                <button type="button" class="btn btn-outline-info">Info</button>
                                <button type="button" class="btn btn-outline-warning">Warning</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="btn-group btn-group-xs" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-outline-danger">Danger</button>
                                <button type="button" class="btn btn-outline-info">Info</button>
                                <button type="button" class="btn btn-outline-warning">Warning</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Button Group Sizes end -->
<!-- Block level buttons start -->
<section id="block-level-buttons">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Block buttons</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="subtitle">Create block level buttons—those that span the full width of a parent—by adding <code>.btn-block</code>.</p>
                        <!-- Block level buttons -->
                        <div class="form-group">
                            <button type="button" class="btn mb-1 btn-primary btn-lg btn-block">Block level button</button>
                            <button type="button" class="btn mb-1 btn-secondary btn-lg btn-block">Block level button</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Block buttons</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="subtitle">To create block outline buttons use <code>.btn-block</code> class.</p>
                        <!-- Block level buttons with icon -->
                        <div class="form-group">
                            <button type="button" class="btn mb-1 btn-outline-primary btn-icon btn-lg btn-block">Block level button</button>
                            <button type="button" class="btn mb-1 btn-outline-secondary btn-icon btn-lg btn-block">Block level button</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Block level buttons end -->
<!-- Button tags start -->
<section id="button-tags">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Button tags</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="subtitle">The .btn classes are designed to be used with the <code>&lt;button&gt;</code> element. However, you can also use these classes on <code>&lt;a&gt;</code> or <code>&lt;input&gt;</code> elements.</p>
                        <!-- anchor, button tag, input button, input submit Tags -->
                        <div class="form-group">
                            <a class="btn btn-primary btn-min-width mr-1 mb-1" href="#" role="button">Link</a>
                            <button class="btn btn-primary btn-min-width mr-1 mb-1" type="submit">Button</button>
                            <input class="btn btn-primary btn-min-width mr-1 mb-1" type="button" value="Input">
                            <input class="btn btn-primary btn-min-width mr-1 mb-1" type="submit" value="Submit">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Block buttons</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <p class="subtitle">The .btn classes are designed to be used with the <code>&lt;button&gt;</code> element. However, you can also use these classes on <code>&lt;a&gt;</code> or <code>&lt;input&gt;</code> elements.</p>
                        <div class="form-group">
                            <a class="btn btn-outline-primary btn-min-width mr-1 mb-1" href="#" role="button">Link</a>
                            <button class="btn btn-outline-primary btn-min-width mr-1 mb-1" type="submit">Button</button>
                            <input class="btn btn-outline-primary btn-min-width mr-1 mb-1" type="button" value="Input">
                            <input class="btn btn-outline-primary btn-min-width mr-1 mb-1" type="submit" value="Submit">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Button tags end -->
<!-- Nesting Button group start -->
<section id="nesting-button-group">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Nesting Button group</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                <button type="button" class="btn btn-success">1</button>
                                <button type="button" class="btn btn-danger">2</button>
                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Dropdown
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
                                        <a class="dropdown-item bg-warning" href="#">Dropdown link</a>
                                        <a class="dropdown-item bg-warning" href="#">Dropdown link</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Nesting Outline Button group</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                                <button type="button" class="btn btn-outline-success">1</button>
                                <button type="button" class="btn btn-outline-danger">2</button>
                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop2" type="button" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        Dropdown
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                        <a class="dropdown-item" href="#">Dropdown link</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Nesting Button group end -->
<!-- Vertical variation start -->
<section id="vertical-variation">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Vertical variation</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <p>Make a set of buttons appear vertically.</p>
                                <div class="form-group">
                                    <!-- Vertical variation -->
                                    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                                        <button type="button" class="btn btn-secondary">Button</button>
                                        <button type="button" class="btn btn-secondary">Button</button>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-secondary">Button</button>
                                        <button type="button" class="btn btn-secondary">Button</button>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <p>Vertical variation with different colors</p>
                                <div class="form-group">
                                    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                                        <button type="button" class="btn btn-primary">Primary</button>
                                        <button type="button" class="btn btn-secondary">Secondary</button>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop5" type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Secondary
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-success">Success</button>
                                        <button type="button" class="btn btn-danger">Danger</button>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop6" type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop7" type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop8" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Vertical Variation</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 col-sm-12">
                                <p>Vertical variation with Outlines</p>
                                <div class="form-group">
                                    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                                        <button type="button" class="btn btn-outline-primary">Button</button>
                                        <button type="button" class="btn btn-outline-secondary">Button</button>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop9" type="button" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-outline-success">Button</button>
                                        <button type="button" class="btn btn-outline-danger">Button</button>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop10" type="button" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop11" type="button" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop12" type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-sm-12">
                                <p>Vertical variation with Outlines</p>
                                <div class="form-group">
                                    <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                                        <button type="button" class="btn btn-outline-amber">Button</button>
                                        <button type="button" class="btn btn-outline-cyan">Button</button>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop13" type="button" class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop5">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <button type="button" class="btn btn-outline-red">Button</button>
                                        <button type="button" class="btn btn-outline-blue-grey">Button</button>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop14" type="button" class="btn btn-outline-purple dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop5">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop15" type="button" class="btn btn-outline-pink dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                        <div class="btn-group" role="group">
                                            <button id="btnGroupVerticalDrop16" type="button" class="btn btn-outline-amber dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Dropdown
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop6">
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                                <a class="dropdown-item" href="#">Dropdown link</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Vertical variation end -->
<!-- Social Buttons start -->
<section id="social-button">
    <div class="row">
        <div class="col-12 mt-3 mb-1">
            <h4 class="text-uppercase">Social Buttons</h4>
            <p>Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Social Buttons</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <!-- Social Buttons with Social Name -->
                            <a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-facebook"><i class="la la-facebook"></i> Facebook</a>
                            <a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-reddit"><span class="la la-reddit font-medium-3"></span> Reddit</a>
                            <a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-twitter"><span class="la la-twitter"></span> Twitter</a>
                            <a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-github"><i class="la la-github font-medium-3"></i> Github</a>
                            <a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-soundcloud"><span class="la la-soundcloud"></span> Soundcloud</a>
                            <a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-vimeo"><span class="la la-vimeo-square font-medium-3"></span> Vimeo</a>
                            <a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-pinterest"><span class="la la-pinterest-p font-medium-3"></span> Pinterest</a>
                            <a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-tumblr"><span class="la la-tumblr font-medium-3"></span> Tumblr</a>
                            <a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-yahoo"><span class="la la-yahoo font-medium-3"></span> Yahoo</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Social Button</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <!-- Social Outline Buttons -->
                            <a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-facebook"><i class="la la-facebook"></i> Facebook</a>
                            <a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-reddit"><span class="la la-reddit font-medium-4"></span> Reddit</a>
                            <a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-twitter"><span class="la la-twitter font-medium-4"></span> Twitter</a>
                            <a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-github"><i class="la la-github font-medium-4"></i> Github</a>
                            <a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-soundcloud"><span class="la la-soundcloud"></span> Soundcloud</a>
                            <a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-vimeo"><span class="la la-vimeo-square font-medium-4"></span> Vimeo</a>
                            <a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-pinterest"><span class="la la-pinterest-p font-medium-4"></span> Pinterest</a>
                            <a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-tumblr"><span class="la la-tumblr font-medium-4"></span> Tumblr</a>
                            <a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-yahoo"><span class="la la-yahoo font-medium-4"></span> Yahoo</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Social Buttons end -->
<!-- Social Icon Buttons start -->
<section id="social-icon-button">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Social Icon Buttons</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <!-- Social Icon Buttons -->
                        <div class="form-group">
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-adn"><span class="la la-adn"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-bitbucket"><span class="la la-bitbucket font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-dropbox"><span class="la la-dropbox font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-facebook"><span class="la la-facebook"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-flickr"><span class="la la-flickr font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-foursquare"><span class="la la-foursquare font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-github"><span class="la la-github font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-google"><span class="la la-google font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-instagram"><span class="la la-instagram font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-linkedin"><span class="la la-linkedin font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-microsoft"><span class="la la-windows font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-odnoklassniki"><span class="la la-odnoklassniki font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-openid"><span class="la la-openid font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-pinterest"><span class="la la-pinterest-p font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-reddit"><span class="la la-reddit font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-soundcloud"><span class="la la-soundcloud"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-tumblr"><span class="la la-tumblr font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-twitter"><span class="la la-twitter"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-vimeo"><span class="la la-vimeo-square font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-vk"><span class="la la-vk font-medium-3"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-yahoo"><span class="la la-yahoo font-medium-3"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Social Icon Button</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <!-- Social Icons Outline Buttons -->
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-adn"><span class="la la-adn"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-bitbucket"><span class="la la-bitbucket font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-dropbox"><span class="la la-dropbox font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-flickr"><span class="la la-flickr font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-foursquare"><span class="la la-foursquare font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span class="la la-github font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-google"><span class="la la-google font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-instagram"><span class="la la-instagram font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-microsoft"><span class="la la-windows font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-odnoklassniki"><span class="la la-odnoklassniki font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-openid"><span class="la la-openid font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-pinterest"><span class="la la-pinterest-p font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-reddit"><span class="la la-reddit font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-soundcloud"><span class="la la-soundcloud"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-tumblr"><span class="la la-tumblr font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-vimeo"><span class="la la-vimeo-square font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-vk"><span class="la la-vk font-medium-4"></span></a>
                            <a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-yahoo"><span class="la la-yahoo font-medium-4"></span></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Social Icon Buttons end -->
<!-- Social Buttons Width start -->
<section id="social-button-size">
    <div class="row">
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Social Buttons Size</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <!-- Social Buttons large name -->
                            <a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-adn"><span class="la la-adn font-medium-3"></span> Sign in with App.net</a>
                            <a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-dropbox"><span class="la la-dropbox font-medium-3"></span> Sign in with dropbox</a>
                            <a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-flickr"><span class="la la-flickr font-medium-3"></span> Sign in with flickr</a>
                            <a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-github"><span class="la la-github font-medium-3"></span> Sign in with github</a>
                            <a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-google"><span class="la la-google font-medium-3"></span> Sign in with google</a>
                            <a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-facebook"><span class="la la-facebook"></span> Sign in with facebook</a>
                            <a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-foursquare"><span class="la la-foursquare font-medium-3"></span> Sign in with foursquare</a>
                            <a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-bitbucket"><span class="la la-bitbucket font-medium-3"></span> Sign in with bitbucket</a>
                            <a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-yahoo"><span class="la la-yahoo font-medium-3"></span> Sign in with Yahoo</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Outline Social Buttons Size</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                            <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                            <li><a data-action="expand"><i class="ft-maximize"></i></a></li>
                            <li><a data-action="close"><i class="ft-x"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="card-content collapse show">
                    <div class="card-body">
                        <div class="form-group">
                            <!-- Social Outline Buttons with text -->
                            <a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-adn"><span class="la la-adn font-medium-4"></span> Sign in with App.net</a>
                            <a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-dropbox"><span class="la la-dropbox font-medium-4"></span> Sign in with dropbox</a>
                            <a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-flickr"><span class="la la-flickr font-medium-4"></span> Sign in with flickr</a>
                            <a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-github"><span class="la la-github font-medium-4"></span> Sign in with github</a>
                            <a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-google"><span class="la la-google font-medium-4"></span> Sign in with google</a>
                            <a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-facebook"><span class="la la-facebook"></span> Sign in with facebook</a>
                            <a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-foursquare"><span class="la la-foursquare font-medium-4"></span> Sign in with foursquare</a>
                            <a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-bitbucket"><span class="la la-bitbucket font-medium-4"></span> Sign in with bitbucket</a>
                            <a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-yahoo"><span class="la la-yahoo font-medium-3"></span> Sign in with Yahoo</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Social Buttons Width end -->
</div>

<script type="text/javascript">
	lucky.require(['jquery'],function(){
        $(".block-submit").on("click",function(){
            var block_ele = $(this), text = block_ele.text(), loading = $("<span><i class=\"ft-refresh-cw icon-spin font-medium-2\"></i> </span>");
            block_ele.attr("disabled","disabled");
            block_ele.prepend(loading);
            // window.setTimeout(function () {
            //     loading.remove();
            //     block_ele.removeAttr("disabled");
            //     clearTimeout();
            // }, 2000);
        });
    });
</script>